<template>
	<view class="mbti-groups">
		<view class="mbti-groups-content flex-column-start-center" :style="{'background-image': `url(${bgUrl})`}">
			<view class="top-box" :style="{height:contentTop+'rpx'}"></view>
			<view class="content-box">
				<scroll-view ref="scrollView" :scroll-y="true" class="scroll-content" :show-scrollbar="false"
					:scroll-with-animation="true">
					<view class="groups-list flex-row-start-start">
						<view class="group-item flex-column-end-center" v-for="(item,index) in groupList" :key="index"
							:class="{'group-item-choosed':item.isChoosed}">
							<view class="group-choose-btn" :class="{'btn-choosed':item.isChoosed}"
								@click.stop="handleGroupChooseClick(item.id)"></view>
							<view class="group-avatar-list flex-row-start-center">
								<view class="group-avatar-item flex-row-center-center"
									v-for="(citem,cindex) in item.avatarList" :key="cindex"
									:class="{'group-avatar-item-hide':(item.avatarList.length>5)&&cindex>=4}">
									<image class="cover-img" :src="citem" style="border-radius: 50%;" mode="aspectFill">
									</image>
								</view>
								<view class="group-avatar-item flex-row-center-center" v-if="item.avatarList.length>5">
									<view class="avatar-more-icon"></view>
									<view class="avatar-more-icon"></view>
									<view class="avatar-more-icon"></view>
								</view>
							</view>
							<view class="group-name">{{item.groupName}}</view>
						</view>

						<view class="group-item flex-row-center-center" @click="handleAddGroup">
							<image class="group-item-add-icon"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2fcc9c0df34646935b69533bd771db.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<mbtiGroupDetail ref="mbtiGroupDetail"></mbtiGroupDetail>
	</view>
</template>

<script>
	import mbtiGroupDetail from "@/components/m-mbti/mbti-group-detail.vue"
	export default {
		components: {
			mbtiGroupDetail
		},
		data() {
			return {
				bgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d394a848c52a40a0b7fc9baf22ba6a01.png",
				screenWidth: 375,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				contentTop: 300,
				groupList: [{
						id: 0,
						groupName: "姐妹淘",
						avatarList: [
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/211b035f23c2479c85aeef294c3a4108.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
						],
						isChoosed: true
					},
					{
						id: 1,
						groupName: "亲爱的",
						avatarList: [
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/211b035f23c2479c85aeef294c3a4108.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png"
						],
						isChoosed: false,
					},
					{
						id: 2,
						groupName: "相亲相爱一家人",
						avatarList: [
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/211b035f23c2479c85aeef294c3a4108.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/211b035f23c2479c85aeef294c3a4108.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
						],
						isChoosed: false,
					},

				]
			}
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo

				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop

				this.contentTop = rpxTop + rpxHeight + 66

			} catch (error) {
				//TODO handle the exception
			}
		},
		methods: {
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			handleAddGroup() {
				console.log("添加分组");
			},
			handleGroupChooseClick(id) {
				// 这里后边直接走接口
				this.groupList.forEach((item, index) => {
					if (item.id == id) {
						item.isChoosed = true
						uni.showToast({
							icon: "none",
							title: "置顶成功"
						})
					} else {
						item.isChoosed = false
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.mbti-groups {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: #ededed;
		box-sizing: border-box;

		.mbti-groups-content {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;

			.top-box {
				width: 100%;
			}

			.content-box {
				width: 100%;
				flex: 1;
				overflow: hidden;

				.groups-list {
					width: 100%;
					padding: 8rpx 48rpx;
					flex-wrap: wrap;

					.group-item {
						position: relative;
						width: calc(50% - 10rpx);
						height: 200rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						margin-bottom: 20rpx;


						&:nth-child(2n) {
							margin-left: 20rpx;
						}

						.group-item-add-icon {
							width: 52rpx;
							height: 52rpx;
						}

						.group-choose-btn {
							position: absolute;
							right: 16rpx;
							top: 16rpx;
							width: 32rpx;
							height: 32rpx;
							border: 2rpx solid #CECECE;
							border-radius: 50%;
						}

						.btn-choosed {
							background-color: #6DD400;
							border-color: #B0FF5C;
						}

						.group-avatar-list {
							width: 100%;
							height: 48rpx;
							margin-bottom: 18rpx;
							padding: 0rpx 20rpx;

							.group-avatar-item {
								width: 48rpx;
								height: 48rpx;
								border-radius: 50%;
								margin-right: 10rpx;

								&:last-child {
									margin-right: 0rpx;
								}

								.avatar-more-icon {
									width: 4rpx;
									height: 4rpx;
									background: #979797;
									margin-right: 4rpx;

									&:last-child {
										margin-right: 0rpx;
									}
								}
							}

							.group-avatar-item-hide {
								display: none;
							}
						}

						.group-name {
							width: 100%;
							height: 42rpx;
							margin-bottom: 16rpx;
							font-weight: 300;
							font-size: 30rpx;
							color: #494949;
							line-height: 42rpx;
							padding: 0rpx 20rpx;
						}

					}

					.group-item-choosed {
						box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(109, 212, 0, 0.5);
					}
				}

			}
		}

	}
</style>